/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

.commit-info-view {
  display: flex;
  flex-direction: column;
  height: 100%;

  --toolbar-fade-height: 30px;
}

.commit-info-view-main-content {
  overflow-y: auto;
  padding: var(--pad);
  flex-grow: 1;
  padding-bottom: var(--toolbar-fade-height);
}

.commit-info-view-multi-commit {
  display: flex;
  flex-direction: column;
}

.commit-info-view-multi-commit .commit-list {
  display: flex;
  flex-direction: column;
  margin-left: calc(4 * var(--pad));
  gap: var(--halfpad);
  flex-grow: 1;
}

.commit-info-view-multi-commit .commit-list-container {
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  margin: var(--pad);
}

.commit-info-view-multi-commit .commit-list-header {
  text-align: center;
  display: flex;
  align-items: center;
  gap: var(--halfpad);
  margin: var(--pad);
}

.commit-info-view vscode-text-area,
.commit-info-view vscode-text-field {
  width: 100%;
  margin: var(--halfpad) 0;
}

.commit-info-rendered-title {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: var(--pad);
  /* add padding then undo with margin so focus state outline is less cramped */
  padding: var(--halfpad);
  margin: calc(-1 * var(--halfpad));
}

.commit-info-rendered-field {
  cursor: pointer;
  white-space: pre-wrap;
  margin: calc(-1 * var(--pad));
  margin-bottom: var(--pad);
  transition: background-color 0.1s;
  border-radius: var(--pad);
  padding: var(--pad);
}

.commit-info-rendered-textarea,
.commit-info-rendered-custom {
  cursor: pointer;
  white-space: pre-wrap;
  transition: background-color 0.1s;
  border-radius: var(--pad);
  padding: var(--pad);
  word-break: break-word;
}

.commit-info-rendered-field:focus-visible,
.commit-info-rendered-title:focus-visible,
.commit-info-rendered-textarea:focus-visible,
.commit-info-rendered-custom:focus-visible {
  outline: var(--focus-border) 1px auto;
  outline-offset: -1px;
}

.commit-info-section .see-more-container {
  margin: calc(-1 * var(--pad));
  margin-bottom: var(--pad);
}

.commit-info-rendered-textarea:hover,
.commit-info-rendered-field:hover,
.commit-info-rendered-custom:hover {
  background: var(--tooltip-background);
}

.commit-info-actions-bar {
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  flex-wrap: wrap;
  border-top: 1px solid var(--panel-view-border);
  padding: var(--pad);
  justify-content: space-between;
}
.commit-info-actions-bar-left {
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  justify-content: flex-start;
}
.commit-info-actions-bar-right {
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.commit-info-actions-bar-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  gap: var(--pad);
  margin-left: auto;
}

.commit-info-actions-bar-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}

.commit-info-view-toolbar-top {
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--panel-view-border);
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  justify-content: flex-end;
}

.commit-info-section.commit-info-title-field-section {
  margin-top: 0;
}

.commit-info-view-toolbar-bottom:before {
  /* fade to bg color just above toolbar, to hint that you can keep scrolling */
  background: linear-gradient(0deg, var(--background), transparent);
  width: 100%;
  height: var(--toolbar-fade-height);
  display: block;
  position: absolute;
  content: ' ';
  margin-top: calc(-1 * var(--toolbar-fade-height));
  opacity: 0.8;
  pointer-events: none;
}

.commit-info-view-multi-commit .commit-list .commit-details:before {
  display: none;
}

.hover-edit-button {
  opacity: 0;
  transition: opacity 0.1s;
  display: flex;
}
.commit-info-rendered-title:focus-within .hover-edit-button,
.commit-info-rendered-field:focus-within .hover-edit-button,
.commit-info-rendered-textarea:focus-within .hover-edit-button,
.commit-info-rendered-custom:focus-within .hover-edit-button,
.commit-info-rendered-title:hover .hover-edit-button,
.commit-info-rendered-field:hover .hover-edit-button,
.commit-info-rendered-textarea:hover .hover-edit-button,
.commit-info-rendered-custom:hover .hover-edit-button {
  opacity: 1;
}

.commit-info-small-title {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 90%;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: var(--halfpad);
}

.commit-info-section {
  margin: var(--pad);
  margin-top: calc(2 * var(--pad));
}

.commit-info-title-byline {
  padding: 5px;
  margin: 0 var(--halfpad);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--halfpad);
  align-items: center;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
.overflow-ellipsis.overflow-shrink {
  flex-shrink: 1;
}

.commit-info-title-byline .you-are-here-container {
  margin-right: 5px;
  flex-shrink: 0;
}

.commit-info-title-byline .tooltip-creator {
  display: inline;
}

.commit-info-view .empty-description {
  display: flex;
  gap: var(--halfpad);
  align-items: center;
  margin: var(--halfpad);
}

.commit-info-view .changed-file-list {
  padding: var(--halfpad) 0;
}

.commit-info-confirm-modal-paragraphs {
  display: flex;
  gap: var(--pad);
  flex-direction: column;
}

.commit-info-view .image-drop-zone {
  margin: var(--halfpad) 0;
}
.commit-info-view .image-drop-zone vscode-text-area {
  margin: 0;
}

.commit-info-field {
  position: relative;
}
.text-area-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pad);
  font-size: 90%;
  margin-bottom: calc(-1.5 * var(--pad));
  border-radius: var(--pad);
}
.text-area-toolbar .choose-file {
  display: none;
}

.commit-info-tokenized-field {
  position: relative;
  display: flex;
  gap: var(--halfpad);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--halfpad) 0;
  --token-height: 26px;
}
.commit-info-tokenized-field vscode-text-field {
  margin: 0;
}

.commit-info-field-with-typeahead {
  flex-grow: 1;
  min-width: 30px;
  position: relative;
  height: var(--token-height);
}

.commit-info-tokenized-field .token,
.suggested-reviewers .token {
  padding: 0;
  background-color: var(--tooltip-background);
  padding: 0 var(--pad);
  border: 1px solid var(--tooltip-border);
  display: flex;
  align-items: center;
  gap: var(--halfpad);
  min-height: calc(var(--token-height) - 2px);
}

.commit-info-tokenized-field .token.clickable {
  cursor: pointer;
}

.commit-info-tokenized-field .token.clickable:hover {
  background-color: var(--hover-darken);
  text-decoration: underline;
}

.commit-info-tokenized-field .token button {
  margin-right: calc(-1 * var(--pad));
}

.commit-info-tokenized-field .typeahead-suggestions {
  position: absolute;
  top: calc(100% + var(--halfpad));
  max-width: 250px;
  min-width: 250px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  height: unset;
}

.commit-info-tokenized-field:not(:focus-within) .typeahead-suggestions {
  display: none;
}

.commit-info-tokenized-field .typeahead-suggestions .suggestion {
  --typeahead-img-size: 30px;
  display: flex;
  flex-direction: row;
  gap: var(--pad);
  align-items: center;
  border-radius: var(--halfpad);
  padding: var(--halfpad);
  margin: calc(-1 * var(--halfpad));
  cursor: pointer;
}

.commit-info-tokenized-field .typeahead-suggestions .suggestion:hover,
.commit-info-tokenized-field .typeahead-suggestions .selected-suggestion {
  background-color: var(--hover-darken);
}
.commit-info-tokenized-field .typeahead-suggestions .suggestion-label {
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  max-width: calc(100% - var(--typeahead-img-size));
}

.commit-info-tokenized-field .typeahead-suggestions img {
  width: var(--typeahead-img-size);
  height: var(--typeahead-img-size);
  min-width: var(--typeahead-img-size);
  border-radius: 100%;
  position: relative;
  background: linear-gradient(45deg, var(--background), var(--foreground));
}

.commit-info-tokenized-field .typeahead-suggestions img::before {
  /* fallback if the image URL doesn't load */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: var(--typeahead-img-size);
  background: linear-gradient(45deg, var(--background), var(--foreground));
  text-align: center;
  border-radius: 100%;
  display: block;
  width: var(--typeahead-img-size);
  height: var(--typeahead-img-size);
  overflow: hidden;
}

.upload-status {
  cursor: pointer;
  user-select: none;
  min-height: 22px;
  display: flex;
}

.upload-status-error {
  display: flex;
  align-items: center;
  gap: var(--pad);
}

.upload-status-error vscode-button {
  opacity: 0;
  transition: opacity 0.2s;
}
.upload-status-error:hover vscode-button {
  opacity: 1;
}

.image-drop-zone {
  position: relative;
}
.image-drop-zone.hovering-to-drop:before {
  width: 100%;
  height: calc(100% - 4px);
  display: flex;
  content: 'Drop here to upload';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  right: 0;
  justify-content: center;
  align-items: center;
  font-size: 120%;
  background-color: rgba(0, 0, 0, 0.1);
}

.commit-info-view-main-content > .tooltip-creator {
  width: 100%;
}
